<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="../css/index.css">
    <style>
        .e1{
            width:500px;
        }
        img{
            width: 80px;
            height: 80px;
            object-fit: cover;
        }

    </style>
</head>
<body>
<div id="app">
    <el-card class="box-card">
        <el-form :inline="true" class="demo-form-inline" class="a1">
            <!-- 输入提示框 -->

            <el-form-item label="班级编号">
                <el-input v-model="classs.id" placeholder="班级编号"></el-input>
            </el-form-item>

            <el-form-item label="班级名称">
                <el-input v-model="classs.cname" placeholder="班级名称"></el-input>
            </el-form-item>

            <el-form-item label="班级邀请码">
                <el-input v-model="classs.num" placeholder="班级邀请码"></el-input>
            </el-form-item>

            <el-form-item label="班级状态">
                <el-select v-model="classs.status" placeholder="班级状态">
                    <el-option label="所有" value="2"></el-option>
                    <el-option label="封禁" value="0"></el-option>
                    <el-option label="正常" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getclass(1)">查询</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table
                :data="classinfo.records"
                border>
            <el-table-column
                    label="班级编号"
                    align="center"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="班级头像"
                    align="center"
            >
                <template slot-scope="scope">
                    <img style="width: 80px; height: 80px" class="i1" :src="scope.row.image">
                </template>
            </el-table-column>
            <el-table-column
                    label="班级名称"
                    align="center"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.cname }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="班级邀请码"
                    align="center"
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.num }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="160px">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status == 0"
                               size="mini"
                               class="ban"
                               @click="noban(scope.row)">解禁</el-button>
                    <el-button v-if="scope.row.status == 1"
                               size="mini"
                               type="danger"
                               @click="ban(scope.row)">封禁</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--页码-->
        <br/>
        <div class="block">
            <span class="demonstration"></span>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[10,20,30,40,50]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </el-card>


</div>
<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            classs:{
                id: '',
                cname: '',
                num: '',
                status: '2'
            },
            classinfo: [],
            searchone:[],//存取搜索数据
            currentPage4: 1,	//当前所在的页
            total:0,			//总数
            pagesize:10,		//每页数量
        },
        methods: {
            //获取全部班级
            getclass(val){
                this.currentPage4 = val;
                this.searchone = this.classs;
                let p = new URLSearchParams();
                p.append("currentPage4", this.currentPage4);
                p.append("pagesize", this.pagesize);
                p.append("id", this.searchone.id);
                p.append("cname", this.searchone.cname);
                p.append("num", this.searchone.num);
                p.append("status", this.searchone.status);
                axios.post("../../cloud-other/createclass/getclass", p).then(res=>{
                    this.classinfo = res.data;
                    this.total = this.classinfo.total;
                });
            },
            //每页展示数据条数的调整
            handleSizeChange(val) {
                //变化每页值的数量
                this.pagesize = val;
                this.getclass(1);
            },
            //控制页面的跳转
            handleCurrentChange(val) {
                this.getclass(val);
            },
            //封禁
            ban(obj){
                axios.get("../../cloud-other/createclass/ban?id=" + obj.id).then(resp=>{
                    if(resp.data.code == 1){
                        this.$message(resp.data.msg);
                        //继续条件查询
                        this.getclass(this.currentPage4);
                    }else{
                        alert("封禁失败");
                    }
                });
            },
            //解禁
            noban(obj){
                axios.get("../../cloud-other/createclass/noban?id=" + obj.id).then(resp=>{
                    if(resp.data.code == 1){
                        this.$message("解封成功");
                        //继续条件查询
                        this.getclass(this.currentPage4);
                    }else{
                        alert("取消封禁失败");
                    }
                });
            },

        },
        created(){
            this.getclass(1);
        },
        computed: {

        },
        mounted(){
        }
    });
</script>
</body>
</html>